<template>
    <div id="UserInfoPage">
        <div class="user-profile-card">
            <!-- 头像及基础信息区域 -->
            <div class="profile-header">
                <!-- 头像 -->
                <el-avatar
                        class="user-avatar"
                        :src="userInfo.avatarUrl"
                        size="large"
                >
                    <!-- 若没头像可设置默认内容，这里示例用不到 -->
                </el-avatar>

                <!-- 用户名及附加信息 -->
                <div class="user-base-info">
                    <div class="user-name-row">
                        <span class="user-name" style="font-weight: bold;font-size: 25px">{{ userInfo.userName }}</span>
                    </div>
                    <p class="user-id">id:{{ userInfo.id }}</p>
                    <p class="user-desc">{{ userInfo.desc || '这个人很懒~未填写个人简介~' }}</p>
                    <div class="profile-tags">
                        <el-tag
                                type="primary"
                        >
                            <el-icon><Iphone /></el-icon>  {{ userInfo.phone || '暂无手机号' }}
                        </el-tag>
                        <el-tag
                                type="primary"
                        >
                            <el-icon><Message /></el-icon>  {{ userInfo.email || 'xxx@xxx.com' }}
                        </el-tag>
                        <el-tag
                                type="primary"
                        >
                            {{ userInfo.gender || '未知性别' }}
                        </el-tag>
                    </div>
                </div>
            </div>

            <!-- 统计数据区域 -->
            <div class="profile-stats mt-5">
                <div class="stat-item" v-for="(stat, index) in stats" :key="index">
                    <span class="stat-label">{{ stat.label }}：</span>
                    <span class="stat-value" style="font-weight: bold;font-size: large">{{ stat.value }}</span>
                </div>
            </div>

            <!-- 操作按钮区域 -->
            <div class="profile-actions">
                <el-button type="primary" plain @click="handleEdit">修改资料</el-button>
                <el-button type="primary" @click="handleImport">批量导入文章</el-button>
            </div>
        </div>
        <div class="mt-5">
            <el-row :gutter="20">
                <el-col :span="18">
                    <el-card>
                        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="文章" name="article"/>
                            <el-tab-pane label="评论" name="comment"/>
                            <el-tab-pane label="收藏" name="collect"/>
                            <el-tab-pane label="关注" name="follow"/>
                            <el-tab-pane label="粉丝" name="1"/>
                        </el-tabs>
                        <div class="container" v-for="item in data.userArticles">
                            <el-skeleton
                                    :loading="loading"
                                    animated
                                    :rows="1"
                            >
                                <template #default>
                                    <article-card
                                            :id="item.id"
                                            :avatar="item.user.avatarUrl"
                                            :author="item.user.userAccount"
                                            :title="item.title"
                                            :content="item.content"
                                            :cover="item.coverUrl"
                                            :date="item.createTime"
                                            :views="item.viewCount"
                                            :likes="item.likeCount"
                                    />
                                </template>
                            </el-skeleton>
                        </div>
                        <div v-if="data.userArticles.length === 0">
                            <el-empty :image-size="200">
                            </el-empty>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <div style="z-index: 1; position: relative;">

                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import {reactive, ref, onMounted} from 'vue';
import ArticleCard from "@/components/ArticleCard.vue";
import myAxios from "@/axios/axios.js";
import {Iphone, Message} from "@element-plus/icons-vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const loading = ref(true)
const activeName = ref('article')
const userInfo = ref({});
// const userArticles = ref([])
const data = reactive({
    userArticles:[]
})
const router = useRouter()
const route = useRoute()
const userId = route.fullPath.split('/')[2]

const loadUserInfo = async () => {
    const res = await myAxios.get(`/user/${userId}/info`);
    if (res.code === 0 && res.data) {
        userInfo.value = res.data
    }
}
const stats = ref([
    {label: '排名', value: 1481},
    {label: '积分', value: 51},
    {label: '获赞', value: 16},
    {label: '浏览', value: 195},
    {label: '关注', value: 0},
    {label: '粉丝', value: 0}
]);
const searchParams = reactive({
    pageNum: 1,
    pageSize: 10,
    sortField: "createTime",
    sortOrder: "descend",
    userId: userId
})


const loadUserComments = async () => {
    ElMessage.info('已加载评论')
    data.userArticles = []
}
const loadUserFollows = async () => {
    ElMessage.info('已加载关注')
    data.userArticles = []
}
const loadUserFans = async () => {
    ElMessage.info('已加载粉丝')
    data.userArticles = []
}
const loadUserCollects = async () => {
    const res = await myAxios.post('/collection/list/page/vo', searchParams)
    if (res.code === 0 && res.data) {
        data.userArticles = res.data.records
        loading.value = false
    }else {
        ElMessage.error("数据加载失败");
    }
}
const loadUserArticles = async () => {
    const res = await myAxios.post('/article/list/page/vo', searchParams)
    if (res.code === 0 && res.data) {

        data.userArticles = res.data.records

        loading.value = false
    }else {
        ElMessage.error("数据加载失败");
    }
}
onMounted(async () => {
    await handleClick()
    await loadUserInfo()
})
const tabLoadMap = {
    article: loadUserArticles,
    comment: loadUserComments,
    collect: loadUserCollects,
    follow: loadUserFollows,
    1: loadUserFans
}

const handleClick = async () => {
    const handler = tabLoadMap[activeName.value]
    if (handler) {
        await handler()
    }
}
// 模拟修改资料逻辑，实际可跳转编辑页面或弹窗
const handleEdit = () => {
    router.push('/user/edit/info')
};

// 模拟批量导入文章逻辑
const handleImport = () => {
    // 比如：调用 importArticles 接口
    ElMessage.info("批量导入文章成功")

};
</script>

<style scoped>
#UserInfoPage {
    width: 80%;
    margin: 10px auto;
}

.user-profile-card {
    padding: 20px;
    border: 1px solid #ebeef5;

    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.profile-header {
    display: flex;
    align-items: center;
}

.user-avatar {
    width: 80px;
    height: 80px;
    margin-right: 16px;
    position: relative;
    border: 5px solid cornflowerblue;
}

.vip-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background-color: #ffc107;
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}

.user-base-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.user-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.user-name {
    font-size: 18px;
    font-weight: 500;
}

.user-desc,.user-id {
    margin: 5px 0 0 0;
    color: #909399;
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 16px;
    color: #606266;
}

.stat-item {
    display: flex;
    align-items: center;
}

.stat-label {
    font-weight: 500;
}

.profile-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
</style>
